<template>
  <div class="dangan">
    <el-header class="dangheader">
      <el-button icon="el-icon-plus" @click="centerDialogVisible = true">新建文件夹</el-button>
      <el-button icon="el-icon-plus" @click="centerDialogVisibleS=true">新增档案</el-button>
      <el-button icon="el-icon-delete" @click="delC">删除</el-button>
      <el-button icon="el-icon-edit" @click="updateAll">编辑</el-button>
<!--      <el-button @click="yindongs" icon="el-icon-edit">移动</el-button>-->
     <el-button  v-show="buttShow" @click="FujiRowClick" icon="el-icon-search">返回上级</el-button>
    </el-header>

    <!-- 查询搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item class="formcha" label="名称">
        <el-input v-model="formInline.user" placeholder="文件或文件夹名称"></el-input>
      </el-form-item>

      <el-form-item class="formcha">
        <el-button-group>
          <el-button type="primary" @click="fetchdata">查询</el-button>
          <el-button @click="resetForm">
            <i class="el-icon-refresh-right"></i>
            重置
          </el-button>
        </el-button-group>
      </el-form-item>
    </el-form>

    <!-- 展示 -->
    <!-- @select="selectDs" -->
    <el-main>
      <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
    >
      <!--  :class="{ 'el-icon-document': isActive, 'el-icon-folder-opened': hasError }" -->
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column sortable label="名称" @click.stop="qwer">
        <template slot-scope="scope">
          <i :class="scope.row.fold ? 'el-icon-folder-opened' : 'el-icon-document' "></i>
          <el-link>{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        :formatter="updateTimeFmt"
        label="修改日期"
        width="200"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column sortable prop="creatorName" label="添加入" width="150" align="center"></el-table-column>
      <el-table-column label="排序" width="120" align="center">
        <el-button icon="el-icon-top" circle @click.stop="qwe"></el-button>
        <el-button icon="el-icon-bottom" circle @click.stop="qwe"></el-button>
      </el-table-column>
    </el-table>
    </el-main>

    <!-- 新增弹出框 -->
    <el-dialog class="dialogA" title="新增文件夹" :visible.sync="centerDialogVisible" width="500px">
      <span>
        <el-row>
          <el-col :span="5">文件夹名称</el-col>
          <el-col :span="17">
            <el-input v-model="user.foldName" placeholder="文件或文件夹名称"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">可见部门</el-col>
          <el-col :span="17">
            <el-select v-model="user.shareUserIdList" multiple placeholder="请选择部门">
              <el-option
                v-for="item of XZKdata"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">可见人员</el-col>
          <el-col :span="17">
            <el-select v-model="user.shareDepartmentIdList" multiple placeholder="请选择人员">
              <el-option
                v-for="itema in RYdata"
                :key="itema.value"
                :label="itema.label"
                :value="itema.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="updata" @click="fileUpdate">编 辑</el-button>
        <el-button type="primary" v-if="!updata" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增档案 -->
    <el-dialog class="dialogA" title="新建档案" :visible.sync="centerDialogVisibleS" width="500px">
      <span>
        <el-row>
          <el-col :span="5">档案名称</el-col>
          <el-col :span="17">
            <el-input placeholder v-model="danganuser.dangAnName"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">所属项目名称</el-col>
          <el-col :span="17">
            <el-input placeholder v-model="danganuser.projectName"></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5" align:left>内容</el-col>
          <el-col :span="17">
            <el-input type="textarea" v-model="danganuser.dangAnContent" :rows="2" placeholder></el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">档案的时间</el-col>
          <el-col :span="17">
            <el-date-picker type="date" v-model="danganuser.dangAnStarttime" placeholder="选择日期"></el-date-picker>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">可见部门</el-col>
          <el-col :span="17">
            <el-select v-model="danganuser.shareDepartmentIdList" multiple placeholder="请选择部门">
              <el-option
                v-for="itema in XZKdata"
                :key="itema.value"
                :label="itema.label"
                :value="itema.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">可见人员</el-col>
          <el-col :span="17">
            <el-select v-model="danganuser.shareUserIdList" multiple placeholder="请选择人员">
              <el-option
                v-for="itema in RYdata"
                :key="itema.value"
                :label="itema.label"
                :value="itema.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisibleS = false">取 消</el-button>
        <el-button type="primary" v-if="updata" @click="danganUpdats">编 辑</el-button>
        <el-button type="primary" v-if="!updata" @click="danganadd">确 定</el-button>
      </span>

    </el-dialog>

    <!-- 档案详情 -->
    <el-drawer title="我是标题" :data="tableData" :visible.sync="drawer" :with-header="false">
      <el-row class="row1">
        <el-col class="text4" :span="23">
          <i @click="drawer=false" class="el-icon-close"></i>
        </el-col>
      </el-row>
      <el-row class="row2">
        <el-col class="text1" :span="6">档案名称：</el-col>
        <el-col class="text2" :span="17">
          <el-input type="text" v-model="danganuser.dangAnName" />
        </el-col>
        <el-col class="text1" :span="6">所属项目名称：</el-col>
        <el-col class="text2" :span="17">
          <el-input type="text" v-model="danganuser.projectName" />
        </el-col>
        <el-col class="text1" :span="6">内容：</el-col>
        <el-col class="text2" :span="17">
          <el-input type="text" v-model="danganuser.dangAnContent" />
        </el-col>
        <el-col class="text1" :span="6">时间：</el-col>
        <el-col class="text2" :span="17">
          <el-input type="text" v-model="danganuser.dangAnStarttime" />
        </el-col>

      </el-row>
    </el-drawer>

    <!-- 删除弹出框 -->

    <el-dialog title="删除" :visible.sync="dialogVisibleSS" width="500px">
      <span>确定删除该文件吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSS = false">取 消</el-button>
        <el-button type="primary" @click="delS">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import changeapi from "@/api/dangan/dangan";
import danganXZK from "@/api/dangan/bumenselect/danganXZK";
import danganRY from "@/api/dangan/renyuanselect/danganRY";
import xinzengdangan from "@/api/dangan/xinzengdangan/danganXinzeng";
import fileapi from "@/api/dangan/fileadd/addfile";

export default {
  data() {
    return {
      tableData: [], // 列表组
      XZKdata: {}, //部门组
      RYdata: [], //人员组
      delsS: [], //删除数据组,
      drawer: false,
      isActive: false,
      hasError: true,
      selpid: "",
      buttShow:true,
      updata: false,
      upda: [], //文件查询组
      files: [], //上传文件组

      flieID: "00000000-0000-0000-0000-000000000000",

      fjiid: "00000000-0000-0000-0000-000000000000", //父级id

      formInline: {
        region: "",
        user: ""
      },
      value1: "",
      multip: true,

      //添加文件组
      user: {
        foldName: "",
        shareUserIdList: [],
        shareDepartmentIdList: [],
        pid: ""
      },

      fujiClass: {},

      //添加档案组
      danganuser: {
        dangAnContent: "",
        dangAnName: "",
        dangAnStarttime: "",
        foldId: "",
        projectName: "",
        shareDepartmentIdList: [],
        shareUserIdList: [],
        sortIndex: 1
      },

      centerDialogVisible: false,
      centerDialogVisibleS: false,
      dialogVisibleSS: false,
      centerDialogVisibleBB: false,
      multipleSelected: [], //部门select数据组
      multipleSelection: [], //人员select数据组
      updateAlls: {}, //编辑档案组
      filedihiz: "", //文件地址
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a17cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a17cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ]
    };
  },

  //生命周期
  created() {
    this.fetchdata(); //查询方法
    this.XZKlist(); //部门select查询方法
    this.RYdataa(); //人员select查询方法
    this.FujiRowClick()
  },
  methods: {
    qwe() {},
    qwer() {
      this.handleRowClick();
    },
    resetForm() {
      this.formInline.user = "";
      this.fetchdata();
    },

    //点击查询ID
    handleRowClick(row, column, event) {
      console.log(row);

      if (row.fold) {
        this.$refs["multipleTable"];

        this.danganuser.foldId = row.id;
        this.user.id = row.id;
        this.flieID = row.id;

        changeapi.updateSeAll(row.id).then(res => {
          this.user = res.result;
          this.fjiid = this.user.pid;
          console.log(this.fjiid);
          sessionStorage.setItem("id", this.fjiid);
        });

        // this.selpid = row.pid ? row.pid : '00000000-0000-0000-0000-000000000000';
        changeapi.cilList(this.flieID).then(res => {
          this.tableData = res.result;
        });
        this.buttShow=true
        console.log(this.fjiid);
        return;
      }

      this.danganAllc(row.id);

      // cilList
    },

    //点击返回上级
    FujiRowClick() {

      console.log("B父级"+this.fjiid);
      changeapi.FjiList(this.fjiid).then(res => {
        this.tableData = res.result;
      });

      if (this.fjiid=="00000000-0000-0000-0000-000000000000") {
        this.buttShow=false
        return
      }

      changeapi.updateSeAll(this.fjiid).then(res => {

        this.user = res.result;
        this.fjiid = this.user.pid;
        console.log("A父级"+this.fjiid);
      });

    },

    handleSelectionChange(arr) {
      this.delsS = [];
      this.upda = [];
      for (const val of arr) {
        this.delsS.push({ fold: val.fold, id: val.id });
        this.upda.push(val.id);
      }
    },
    //时间格式
    updateTimeFmt(row) {
      return new Date(row.updateTime).toLocaleString();
    },
    //部门select
    XZKlist() {
      danganXZK.getBumen().then(res => {
        this.XZKdata = res.result;
        console.log(this.XZKdata);
      });
    },
    //人员select
    RYdataa() {
      danganRY.getRenYuan().then(res => {
        this.RYdata = res.result;
      });
    },

    //查询列表
    fetchdata() {
      console.log(this.tableData);
      // id = id ? id : this.fjiid
      // console.log(id);

      changeapi.getList(this.fjiid, this.formInline.user).then(res => {
        // console.log(this.formInline.user);

        this.tableData = res.result;
      });

      this.user.id = "00000000-0000-0000-0000-000000000000";
      this.flieID = "00000000-0000-0000-0000-000000000000";
    },

    //查询档案详情
    danganAllc(id) {
      this.drawer = true;
      //档案详情
      changeapi.danganAlls(id).then(res => {
        this.danganuser = res.result;
      });
    },

    //添加文件夹
    add() {
      this.user.pid = this.flieID;
      changeapi.add(this.user).then(res => {
        console.log(this.user);

        this.$message.success("添加成功");
        console.log(this.user);

        (this.user.foldName = ""),
          (this.user.shareUserIdList = []),
          (this.user.shareDepartmentIdList = []),
          (this.user.pid = ""),
          (this.centerDialogVisible = false);
        changeapi.cilList(this.flieID).then(res => {
          this.tableData = res.result;
        });
      });
    },

    fileUpdate() {
      changeapi.fileUpdate(this.user).then(res => {
        this.$message.success("编辑成功");
        this.centerDialogVisible = false;
        this.updata = true;
        this.fetchdata();
      });
    },

    yidong() {},

    yindongs() {
      console.log(this.danganusers);
      changeapi.danganUpdate(this.danganusers).then(res => {
        this.$message.success("编辑成功");
        this.centerDialogVisible = false;
        this.updata = true;
        this.fetchdata();
      });
    },

    danganUpdats() {
      console.log(this.danganuser);

      changeapi.danganUpdate(this.danganuser).then(res => {
        this.$message.success("编辑成功");
        this.centerDialogVisible = false;
        this.updata = true;
        this.fetchdata();
      });
    },

    //添加档案
    danganadd() {
      this.fileaddsd();
      // this.danganuser
      this.danganuser.foldId = this.flieID;
      console.log(this.danganuser);

      xinzengdangan
        .danganadds(this.danganuser)
        .then(res => {
          this.$message.success("添加成功");
          this.centerDialogVisibleS = false;
          changeapi.cilList(this.flieID).then(res => {
            this.tableData = res.result;
          });
          this.danganuser.dangAnContent = "";
          this.danganuser.dangAnName = "";
          this.danganuser.dangAnStarttime = "";
          this.danganuser.foldId = "";
          this.danganuser.projectName = "";
          this.danganuser.shareDepartmentIdList = [];
          this.danganuser.shareUserIdList = [];
        })

        // this.sortIndex:1
        .catch(err => {
          console.log("添加失败");
        });
    },

    //文件上传
    fileaddtd(response) {
      this.filedihiz = response;
    },

    //上传文件
    fileaddsd() {

    },

    delC() {
      console.log(this.fjiid);

      if (!this.delsS.length) {
        this.$message.info("请选择一项");
        return;
      }

      this.dialogVisibleSS = true;
    },

    //删除文件夹
    delS() {
      console.log(this.fjiid);

      changeapi
        .danandel(this.delsS)
        .then(res => {
          this.$message.success("删除成功");

          this.fetchdata();
        })
        .catch(err => {
          this.$message.success("删除失败");
          this.fetchdata();
        });
      this.dialogVisibleSS = false;
      this.fetchdata();
    },

    //文件夹详情查询
    updateAll() {
      if (!this.upda.length) {
        this.$message.info("请选择一项");
        return;
      }
      if (this.upda.length > 1) {
        this.$message.info("只能选一项");
        return;
      }

      this.updata = true;
      for (let item of this.tableData) {
        if (item.id === this.upda[0] && item.fold) {
          changeapi.updateSeAll(this.upda).then(res => {
            this.user = res.result;
          });

          this.centerDialogVisible = true;

          return;
        }
      }

      //档案详情
      changeapi.danganAlls(this.upda).then(res => {
        this.danganuser = res.result;
      });

      this.centerDialogVisibleS = true;
      this.centerDialogVisibleBB = true;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    //复选框事件
    selectDs(arr) {
      this.delsS = [];
      this.upda = [];
      for (const val of arr) {
        this.delsS.push({ fold: val.fold, id: val.id });
        this.upda.push(val.id);
      }
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>





<style scoped>
.el-icon-document {
  color: rgba(226, 208, 147,1);
  margin-right: 5px;
}
.el-icon-folder-opened {
  color: rgba(226, 208, 147,1);
  margin-right: 5px;
}
.row2 .el-col {
  margin-bottom: 20px;
}

.row1 .el-col {
  text-align: right;
}
.row1 {
  margin-bottom: 50px;
}

.text3 {
  border: none;
}

.text1 {
  text-align: right;
  margin-top: 10px;
}

.dialogA .el-row {
  margin: 20px;
}

.dialogA .el-row .el-col:nth-child(1) {
  margin-top: 10px;
  text-align: right;
  margin-right: 8px;
}
.bjong {
  background-color: rgba(2, 2, 2, 0.171);

  width: 100%;
  height: 100%;
}
.ainer {
  border: 1px solid #000;
  width: 600px;
  height: 470px;
  background-color: #fff;
  position: absolute;
  top: 100px;
  left: 417px;
  z-index: 5;
}
.ddd {
  /* width:600px;height:370px;background-color:#fff; */
  padding: 60px;

  display: flex;
  /* border: 1px solid #000; */
  flex-direction: column;
  justify-content: space-between;
}

.formcha {
  margin-top: 10px;
}
.demo-form-inline {
  margin-left: 20px;
  border: 1px solid rgba(207, 207, 207);
  border-radius: 6px;
}
.dangheader {
  background-color: rgba(266, 266, 266);
}
.dangheader > .el-button {
  font-size: 12px;
  margin-top: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.dangheader > .el-button:nth-child(1) {
  color: #409eff;
  border: 1px solid #409eff;
  background-color: rgba(33, 160, 247, 0.06);
}

.dangheader > .el-button:nth-child(2) {
  color: #409eff;
  border: 1px solid #409eff;
  background-color: rgba(33, 160, 247, 0.06);
}

.dangheader > .el-button:nth-child(3) {
  color: #f66c6c;
  border: 1px solid #f66c6c;
  background-color: rgba(217, 46, 126, 0.06);
}

.dangheader > .el-button:nth-child(4) {
  color: #67c23a;
  border: 1px solid #67c23a;
  background-color: rgba(46, 217, 146, 0.062);
}
.dangheader > .el-button:nth-child(6) {
  color: #409eff;
  border: 1px solid #409eff;
  background-color: rgba(33, 160, 247, 0.06);
}
</style>


